<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    ></image>
    <view class="div1">
      <Backbar title="培训专题详情" :height="70" />
      <!-- 一级选择器 -->
      <wht-tabs
        v-model="pageData.tab1"
        :list="pageData.tabList1"
        @change="handleTab1"
        bgColor="#e5effd"
        color="#898889"
        active-color="#254872"
        line-color="#254872"
        :font-size="27"
        :isRound="true"
        :min-width="175"
        :padding="100"
      />
      <TopicCard :topic="pageData.topic"></TopicCard>
    </view>
    <scroll-view
      ref="scrollContainer"
      scroll-y="true"
      class="div2"
      enable-flex="true"
      :style="{ height: pageData.div2Height + 'px' }"
    >
      <!-- 空显示 -->
      <view
        v-if="
          (pageData.tab1 === 0 && pageData.courseList.length === 0) ||
          (pageData.tab1 === 1 && pageData.examList.length === 0)
        "
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        "
      >
        <image src="/static/images/icons/imgNone.png" style="width: 309rpx; height: 259rpx" />
      </view>

      <view v-if="pageData.tab1 === 0">
        <view
          v-for="(item, index) in pageData.courseList"
          :key="index"
          @click="navToCourseInfo(item)"
        >
          <CourseItem :course="item" />
        </view>
      </view>
      <view v-if="pageData.tab1 === 1">
        <view v-for="(item, index) in pageData.examList" :key="index">
          <KnowledgeItem :knowledge="item" />
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import TiniCourseItem from '@/components/CourseItem/TiniCourseItem.vue'
import KnowledgeItem from '@/components/KnowledgeItem/KnowledgeCollectionItem.vue'
import { getSpecialDetail } from '@/service/specialTrain/specialTrain'
import { listBg } from '@/static/imgMap'

const pageData = reactive({
  specialId: 0,
  tab1: 0,
  tabList1: ['培训课程', '阶段测试'],
  div2Height: 0,
  courseList: [],
  examList: [],
  topic: {},
})

onMounted(async () => {
  const response = await getSpecialDetail(pageData.specialId)
  pageData.courseList = response.data.courseList
  pageData.examList = response.data.examList
  pageData.topic.examCount = response.data.examList.length
  pageData.topic.courseCount = response.data.courseList.length
  pageData.topic.compCourseCount = response.data.completedCourCount
  pageData.topic.compExamCount = response.data.completedExamCount
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })
})
onLoad((options) => {
  const data = JSON.parse(decodeURIComponent(options.data))
  pageData.specialId = data.specialId
  pageData.topic.title = data.title
  pageData.topic.cover = data.picture
})

const navToCourseInfo = (item) => {
  uni.navigateTo({
    url:
      '/pages/courseCenter/CourseInfo/CourseInfo?data=' + encodeURIComponent(JSON.stringify(item)),
  })
}
</script>

<style scoped lang="scss">
.entire {
  width: 100%;
  .div1 {
    background-color: rgb(37, 73, 115);
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(37, 73, 115);
      width: 100%;
      height: 120rpx;
      color: #fff;
      font-size: large;
    }
  }
  .div2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
  }
}
</style>

<style scoped lang="scss">
.entire {
  width: 100%;
  .div1 {
    background-color: rgb(37, 73, 115);
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(37, 73, 115);
      width: 100%;
      height: 120rpx;
      color: #fff;
      font-size: large;
    }
  }
  .div2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;
  }
}
</style>
